import { Component, OnInit, ViewChild, TemplateRef } from '@angular/core';
import {
  NzFormatEmitEvent,
  NzTreeNode,
  NzTreeNodeOptions,
  NzDropdownService,
  NzDropdownContextComponent,
  NzMenuItemDirective,
  NzModalService,
  NzMessageService,
} from 'ng-zorro-antd';
import { CatalogService } from '../catalog.service';

@Component({
  selector: 'tree',
  templateUrl: './tree.component.html',
  styleUrls: ['./tree.component.css'],
})
export class TreeComponent implements OnInit {
  constructor(
    private _catalogService: CatalogService,
    private nzDropdownService: NzDropdownService,
    private modalSrv: NzModalService,
    public msg: NzMessageService
  ) {}

  private dropdown: NzDropdownContextComponent;
  currentSelectedNode: NzTreeNode;

  contextMenu($event: MouseEvent, template: TemplateRef<void>, node: NzTreeNode): void {
    this.currentSelectedNode = node;
    this.dropdown = this.nzDropdownService.create($event, template);
  }

  close(e: NzMenuItemDirective): void {
    console.log(e);
    this.dropdown.close();
  }

  @ViewChild('treeCom') treeCom;

  nodes = [{ title: '根节点', key: -1 }];

  nzClick(event: NzFormatEmitEvent): void {
    console.log(
      event,
      event.selectedKeys,
      event.keys,
      event.nodes,
      this.treeCom.getSelectedNodeList(),
    );

    this.edit(this.modalContent, event.node.key, event.node.title);
  }

  del(): void {
    this._catalogService.del(this.currentSelectedNode.key).subscribe(
      resp => {
        if (resp.success) {
          this.msg.success('操作成功');
        }
        else
          this.msg.error(resp.bizMessage);
      },
      err => console.error(err),
    );

    this.dropdown.close();
  }

  nzEvent(event: NzFormatEmitEvent): void {
    console.log(event);
    // load child async
    if (event.eventName === 'expand') {
      this._catalogService.queryCatalogList(event.node.key).subscribe(
        res => {
          let array = [];
          res.data.list.forEach(element => {
            console.log('element', element);
            array.push({ title: element.name, key: element.id, isLeaf: true });
          });

          event.node.children = [];
          event.node.addChildren(array);
          console.log(this.nodes);
        },
        err => console.error(err),
      );
    }
  }

  ngOnInit(): void {}
  catalogName: string;
  
  @ViewChild('modalContent')
  modalContent: TemplateRef<{}>;

  edit(tpl: TemplateRef<{}>, catalogId: string, catalogName: string) {
    this.catalogName = catalogName;

    this.modalSrv.create({
      // nzWidth: 1024,
      nzTitle: '编辑分类',
      nzContent: tpl,
      nzOnOk: () => {
        this._catalogService.createOrEdit({id: catalogId, name: this.catalogName}).subscribe(resp => {
          if (resp.success) {
            this.msg.success('操作成功');
          }
          else
            this.msg.error(resp.bizMessage);
            
        });

        return false;
      },
      nzCancelText: '取消',
    });
  }

  create(tpl: TemplateRef<{}>) {
    this.modalSrv.create({
      // nzWidth: 1024,
      nzTitle: '创建分类',
      nzContent: tpl,
      nzOnOk: () => {
        this._catalogService.createOrEdit({id: null, name: this.catalogName}).subscribe(resp => {
          if (resp.success) {
            this.msg.success('操作成功');
          }
          else
            this.msg.error(resp.bizMessage);
            
        });

        return false;
      },
      nzCancelText: '取消',
    });

    this.dropdown.close();
  }
}
